* {
  margin: 0;
  padding: 0;
}

body {
  background: black;
}

.app {
	z-index: 999;
/*  background-image: url(./images/card3.jpg);*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 4px -193px;
  position: absolute;
  margin: 200px auto;
  width: 400px;
  height: 400px;
  border-radius: 999px 0 999px 0;
  transform: rotate(-45deg);
}

.app .petal01,
.app .petal02,
.app .petal03,
.app .petal04,
.app .petal05,
.app .petal06,
.app .petal07{
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 400px;
  border-radius: 999px 0 999px 0;
  background-color: pink;
  transform-origin: bottom left;
  transition: 2s;
  transform: rotate(0deg);
  opacity: 0.3;
}

.app:hover .petal01 {
  transform: rotate(30deg);
}

.app:hover .petal02 {
  transform: rotate(60deg);
}

.app:hover .petal03 {
  transform: rotate(90deg);
}

.app:hover .petal04 {
  transform: rotate(-30deg);
}

.app:hover .petal05 {
  transform: rotate(-60deg);
}

.app:hover .petal06 {
  transform: rotate(-90deg);
}
